<template>
    <div>
<!-- <s-table :data="tableData">
    <s-table-column prop="date" title="Date" />
    <s-table-column prop="name" title="Name" />
    <s-table-column prop="address" title="Address" />
  </s-table> -->
   <!-- <s-table :data="tableData">
            <s-table-column prop="date" title="Date" />
            <s-table-column prop="name" title="Name" />
            <s-table-column prop="address" title="Address" />
            <s-table-column  title="操作">
              <template #default="row">
        <button @click="editRow(row)">编辑</button>
        <button>删除</button>
      </template>
            </s-table-column>
          </s-table> -->

          <s-table :data="tableData" @selection-change="onSelectionChange" :headerCellStyle="headerCellStyle">
            <s-table-column type="selection" />
            <s-table-column prop="date" title="Date" />
            <s-table-column prop="name" title="Name" />
            <s-table-column prop="address" title="Address" />
            <s-table-column  title="操作">
              <template #default="row">
        <button @click="editRow(row)">编辑</button>
        <button>删除</button>
      </template>
            </s-table-column>
          </s-table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {Table as STable,TableColumn as STableColumn} from "../../../packages/table"
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Mark',
    address: 'No. 189, Grove St, Los Angeles',
  },
{
    date: '2016-05-03',
    name: 'Mark',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-03',
    name: 'Mark',
    address: 'No. 189, Grove St, Los Angeles'
  }
]);
const editRow = (row: any) => {
  console.log('editRow', row)
}
const onSelectionChange=(checkedRows: any)=>{
  console.log('checkedRows',checkedRows);
}
const headerCellStyle =({row,column, rowIndex, columnIndex})=>{
    console.log('s',row)
  // console.log('s', column,)
  // console.log('s',rowIndex, columnIndex)
  return{
  color: 'red',
  background: 'yellow',
  fontWeight: 'bold',
  border: '1px solid black',
 }
}
</script>

<style lang="scss" scoped>

</style>
